<link rel="stylesheet" href="css/index.css"/>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/menu.js"></script>

<div id="app" style="height: 100%;">
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">位置</el-breadcrumb-item>
        <el-breadcrumb-item>销售管理</el-breadcrumb-item>
        <el-breadcrumb-item>销售单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br/>

    <el-button type="primary" size="mini" @click="dialogFormVisible=true">新增</el-button>
    <el-table :data="tableData" height="450px" border style="width: 100%">
        <el-table-column fixed prop="soId" label="销售单编号" width="180">
            <template slot-scope="scope">
                <el-button type="text" @click="showDetails(scope.row.soId)">{{scope.row.soId}}</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column prop="customerName" label="客户名称" width="180"></el-table-column>
        <el-table-column prop="account" label="创建用户" width="180"></el-table-column>
        <el-table-column prop="tipFee" label="附加费用" width="180"></el-table-column>
        <el-table-column prop="productTotal" label="采购产品总价" width="180"></el-table-column>
        <el-table-column prop="soTotal" label="采购单总价格" width="180"></el-table-column>
        <el-table-column prop="payType" label="付款方式" width="180">
            <template slot-scope="scope">
                <span v-if="scope.row.payType==1">货到付款</span>
                <span v-else-if="scope.row.payType==2">款到发货</span>
                <span v-else-if="scope.row.payType==3">预付款发货</span>
            </template>
        </el-table-column>
        <el-table-column prop="prePayFee" label="最低预付款金额" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="180">
            <template slot-scope="scope">
                <span v-if="scope.row.status==1">新建</span>
                <span v-else-if="scope.row.status==2">收货</span>
                <span v-else-if="scope.row.status==3">付款</span>
                <span v-else-if="scope.row.status==4">了结</span>
                <span v-else-if="scope.row.status==5">预付</span>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
            <template slot-scope="scope">
                <el-button type="text" size="medium" @click="del(scope.row.soId)">删除</el-button>
                <el-button type="text" size="medium" @click="updatePage(scope.row.soId)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            :total="totalRecord"
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[6,10,15,20]"
            @current-change="handleCurrentChange"
            @size-change="handleSize">
    </el-pagination>

    <!--销售单弹框-->
    <el-dialog title="销售单界面" :visible.sync="dialogFormVisible" :before-close="closeBefore" width="1100" fullscreen>
        <div style="height: 180px;border: 1px lightgray dotted;margin-top: -25px">
            <el-form label-width="120px" :model="form" :inline="true" class="demo-form-inline"
                     style="margin-top: 5px;font-size: 12px">
                <el-form-item label="销售单编号">
                    <el-input v-model="form.soId" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input v-model="form.createTime" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="客户">
                    <el-select v-model="form.customerCode" placeholder="请选择客户" style="width: 202px">
                        <el-option v-for="customer in customersFrom.customers" :label="customer.name"
                                   :value="customer.customerCode"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建用户">
                    <el-input v-model="form.account" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="附加费用">
                    <el-input v-model="form.tipFee" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="采购产品总价">
                    <el-input v-model="form.productTotal" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="付款方式">
                    <el-select v-model="form.payType" placeholder="请选择付款方式" style="width: 202px">
                        <el-option v-for="payType in payTypeForm.payType" :label="payType.label"
                                   :value="payType.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="最低付款金额">
                    <el-input v-if="form.payType == 1" v-model="form.prePayFee" autocomplete="off" readonly></el-input>
                    <el-input v-else-if="form.payType == 2" v-model="form.prePayFee" autocomplete="off"
                              readonly></el-input>
                    <el-input v-else-if="form.payType == 3" v-model="form.prePayFee" autocomplete="off"></el-input>
                    <el-input v-else v-model="form.prePayFee" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.remark" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
        </div>

        <!--新增采购单-----新增产品明细-->
        <div style="height: 240px;border: 1px lightgray dotted;">
            <el-table height="240px" :data="productData" style="width: 100%">
                <el-table-column fixed prop="productCode" label="产品编号" width="150"></el-table-column>
                <el-table-column prop="productName" label="产品名称" width="120"></el-table-column>
                <el-table-column prop="unitName" label="数量单位" width="120"></el-table-column>
                <el-table-column prop="unitPrice" label="采购单价" width="120"></el-table-column>
                <el-table-column prop="newNum" label="产品数量" width="120">
                    <template slot-scope="scope">
                        <input style="width: 80%;border-radius: 4px;height:32px;border: 1px solid #cccccc"
                               size="mini" v-model="scope.row.newNum" @change="HandelProductTotal"/>
                    </template>
                </el-table-column>
                <el-table-column prop="productItemTotal" label="采购明细总价" width="120">
                    <template slot-scope="scope">
                        <span v-if="scope.row.newNum != null">{{scope.row.newNum*scope.row.unitPrice}}</span>
                        <span v-else-if="scope.row.newNum == null">0</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="140">
                    <template slot-scope="scope">
                        <el-button type="text" size="medium" icon="el-icon-delete"
                                   @click="delRow(scope.$index)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div slot="footer" class="dialog-footer" style="margin-top: -30px">
            <el-button @click="cancel">取 消</el-button>
            <el-button @click="getProducts">选择产品明细</el-button>
            <el-button type="primary" @click="addOrUpdate">确 定</el-button>
        </div>
    </el-dialog>

    <!--明细单弹框-->
    <el-dialog title="采购单明细" :visible.sync="dialogTableVisible" width="840">
        <el-table :data="gridData">
            <el-table-column property="soId" label="销售单编号" width="180"></el-table-column>
            <el-table-column property="productName" label="商品名称" width="140"></el-table-column>
            <el-table-column property="unitPrice" label="单价" width="120"></el-table-column>
            <el-table-column property="num" label="数量" width="120"></el-table-column>
            <el-table-column property="unitName" label="单位" width="120"></el-table-column>
            <el-table-column property="itemPrice" label="产品总价"></el-table-column>
        </el-table>
    </el-dialog>

    <!--产品弹框-->
    <el-dialog title="产品列表" :visible.sync="productDialogTableVisible">
        <el-button type="primary" size="mini" @click="sureProduct">确 定</el-button>
        <el-table :data="productGridData" style="width: 100%" height="280" @selection-change="handleSelectionChange">>
            <el-table-column fixed type="selection" width="55"></el-table-column>
            <el-table-column prop="productCode" label="产品编号" width="150"></el-table-column>
            <el-table-column prop="name" label="产品名称" width="120"></el-table-column>
            <el-table-column prop="unitName" label="数量单位" width="120"></el-table-column>
            <el-table-column prop="unitPrice" label="采购单价" width="120"></el-table-column>
        </el-table>
        <el-pagination
                background
                layout="sizes, prev, pager, next, jumper, ->, total, slot"
                :total="productTotalRecord"
                :current-page="productCurrentChange"
                :page-size="productPageSize"
                :page-sizes="[4,10,20]"
                @current-change="handleProductCurrentChange"
                @size-change="handleProductPageSize">
        </el-pagination>
    </el-dialog>
</div>

<script>
    window.onload = function () {

        let vm = new Vue({
            el: "#app",
            data: {
                labelPosition: "left",
                dialogFormVisible: false, /*新增采购单的展示*/
                dialogTableVisible: false, /*明细单的展示*/
                productDialogTableVisible: false,  /*产品数据的展示*/
                tableData: [],  /*主页数据*/
                totalRecord: 0,
                currentPage: 1,
                pageSize: 6,
                gridData: [],  /*明细单数据*/
                productGridData: [],  /*产品单数据*/
                productTotalRecord: 0,
                productCurrentChange: 1,
                productPageSize: 4,
                multipleSelectionData: [], /*选择数据*/
                productData: [], /*选择的数据展示*/
                productItemTotal: 0,
                form: {
                    soId: "",  //采购单编号
                    customerCode: "", //客户编号
                    account: "",    //用户账号
                    createTime: "", //创建时间
                    tipFee: 0,  //附加费用
                    productTotal: 0,//产品总价
                    soTotal: 0,  // 总价格
                    payType: "",  // 付款方式
                    prePayFee: 0, //最低预付款金额
                    status: "",  //处理状态
                    remark: "",  //备注
                    customerName: "", //客户名称
                    soitems: [] //销售明细
                },
                productForm: {
                    productCode: "",
                    name: "",
                    unitName: "",
                    unitPrice: 0.0,
                    num: 0,
                    newNum: 0
                },
                customersFrom: {//客户信息
                    customers: [],
                    customerCode: "",
                    name: ""
                },
                payTypeForm: {
                    payType: [{label: "货到付款", value: 1},
                        {label: "款到发货", value: 2},
                        {label: "预付款发货", value: 3}
                    ],
                    label:"",
                    value:""
                }
            },
            methods: {
                //采购单主页数据展示
                init: function () {
                    this.getData(this.currentPage, this.pageSize,this.payType);
                },
                getData: function (curP, pSize,payType) {
                    let that = this;

                    //查询采购单信息
                    axios.get("getSomains?currentPage=" + curP + "&pageSize=" + pSize+"&payType="+payType).then(function (resp) {
                        that.tableData = resp.data.data.lists;
                        that.totalRecord = resp.data.data.totalRecord;
                         console.log("resp.data.data.lists")
                    });

                    //查询采购单基础信息  创建人  采购单编号  创建时间
                    axios.get("getBasicMassage1").then(function (resp) {
                        that.form.soId = resp.data.data.soId;
                        that.form.account = resp.data.data.account;
                        that.form.createTime = resp.data.data.createTime;
                    });

                    //查询客户信息
                    axios.get("getCustomerMassage").then(function (resp) {
                        that.customersFrom.customers = resp.data.data;
                    });
                },

                handleCurrentChange: function (val) {
                    this.currentPage = val;
                    this.getData(this.currentPage, this.pageSize, this.account, this.name);
                },
                handleSize: function (val) {
                    this.pageSize = val;
                    this.currentPage = 1;
                    this.getData(this.currentPage, this.pageSize, this.account, this.name);
                },
                //展示明细表
                showDetails: function (soId) {
                    let that = this;
                    this.dialogTableVisible = true;
                    axios.get("getSoItemsBySoId/" + soId).then(function (resp) {
                        console.log(resp.data.data)
                        that.gridData = resp.data.data;
                    });
                },
                //产品选择触发该事件
                handleSelectionChange: function (val) {
                    if (this.multipleSelectionData.length != 0) {
                        val.concat(this.multipleSelectionData);
                    }
                    this.multipleSelectionData = val;
                },
                //选择产品
                sureProduct: function () {
                    let flag = false;
                    if (this.productData.length != 0) {
                        for (let i = 0; i < this.multipleSelectionData.length; i++) {
                            for (let j = 0; j < this.productData.length; j++) {
                                console.log(this.multipleSelectionData[i] == this.productData[j])

                                if (this.multipleSelectionData[i].productCode == this.productData[j].productCode) {
                                    flag = true;
                                    break;
                                }
                            }

                            if (flag) {
                                flag = true;
                            } else {
                                this.productData.push(this.multipleSelectionData[i]);
                            }
                        }

                        if (flag) {
                            alert("选择的产品中包含已添加的产品，已添加的产品无需再次添加！！");
                        }
                    } else {
                        this.productData = this.multipleSelectionData;
                    }
                    this.productDialogTableVisible = false;
                },
                //产品列表展示
                getProducts: function () {
                    this.getProductData(this.productCurrentChange, this.productPageSize);
                },
                getProductData: function (curP, pSize) {
                    this.productDialogTableVisible = true;
                    let that = this;

                    axios.get("getProducts1?currentPage=" + curP + "&pageSize=" + pSize).then(function (resp) {
                        console.log(resp.data.data);
                        that.productGridData = resp.data.data.lists;
                        that.productTotalRecord = resp.data.data.totalRecord;
                    });
                },
                handleProductCurrentChange: function (val) {
                    this.productCurrentChange = val;
                    this.getProductData(this.productCurrentChange, this.productPageSize);
                },
                handleProductPageSize: function (val) {
                    this.productPageSize = val;
                    this.getProductData(this.productCurrentChange, this.productPageSize);
                },
                //删除一行数据
                delRow: function (index) {
                    this.productData.splice(index, 1);
                    this.HandelProductTotal();
                },
                //计算单个产品总价
                HandelProductTotal: function () {
                    let sum = 0;
                    for (let i = 0; i < this.productData.length; i++) {
                        if (this.productData[i].newNum !== undefined) {
                            sum += parseInt(this.productData[i].newNum) * this.productData[i].unitPrice;
                        }
                    }
                    this.form.productTotal = sum;
                },
                addOrUpdate: function () {
                    this.form.soitems = this.productData;  //将产品明细添加到主单里面
                    let that = this;
                    axios.post("addOrUpdateSoMain", this.form).then(function (resp) {
                        if (resp.data.code == 200) {
                            that.$message({
                                message: '成功',
                                type: 'success'
                            });

                            that.clearSoMain();
                            that.dialogFormVisible = false;
                            that.init();
                        }
                    });
                },
                del:function (soId){
                    if(window.confirm("确认删除?")){
                        let that = this;
                        axios.get("delSomain?soId="+soId).then(function (resp){
                            console.log(resp.data)
                            if(resp.data>0){
                                that.$message({
                                    showClose: true,
                                    message: '恭喜你，删除成功',
                                    type: 'success',
                                    duration:"1000"
                                });
                            }else {
                                that.$message({
                                    showClose: true,
                                    message: '删除失败',
                                    type: 'success',
                                    duration:"1000"
                                });
                            }
                            that.clearSoMain();
                            that.init();
                        });
                    }
                },
                clearSoMain: function () {
                    let that = this;
                    that.form.soId = that.form.customerCode = that.form.account = that.form.createTime = "";
                    that.form.tipFee = that.form.productTotal = that.form.soTotal = that.form.prePayFee = 0;
                    that.form.payType = that.form.status = that.form.remark = that.form.customerName = "";
                    that.form.soitems = [];
                    that.productData = [];
                },
                updatePage: function (soId) {
                    let that = this;
                    axios.get("getSoMainBySoId?soId=" + soId).then(function (resp) {
                        that.form = resp.data.data;
                    });
                    axios.get("getSoItemsBySoId/" + soId).then(function (resp) {
                        that.productData = resp.data.data;
                        for (let i = 0; i < that.productData.length; i++) {
                            that.productData[i].newNum = that.productData[i].num;
                        }
                    });
                    this.dialogFormVisible = true;
                },
                cancel: function () {
                    this.dialogFormVisible = false;
                    this.clearSoMain();
                    this.init();
                },
                closeBefore: function () {
                    this.cancel();
                    this.init();
                }
            }
        });

        vm.init();
    }

</script>
